<template>
    <div id="province">
        <el-form v-model="formData" label-width="100px" label-position="right">
            <el-row>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form-item label="省:">
                            <el-select size="small" v-model="formData.province" placeholder="请选择省" filterable @change="handleChangeProvince">
                                <el-option
                                    v-for="item in provinceList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id+ ',' + item.name">
                                </el-option> 
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form-item label="市:">
                            <el-select :disabled="formData.province ? false : true" size="small" filterable v-model="formData.city" placeholder="请选择市" @change="handleChangeCity">
                                <el-option
                                    v-for="item in cityList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id+ ',' + item.name">
                                </el-option> 
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple">
                        <el-form-item label="区:">
                            <el-select :disabled="formData.city ? false : true" size="small" filterable v-model="formData.area" placeholder="选择区/县" @change="handleChangeArea">
                                <el-option
                                    v-for="item in areaList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id+ ',' + item.name">
                                </el-option> 
                            </el-select>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-form-item label="详细地址:">
                <el-input type="textarea" v-model="formData.localDetails" :rows="3" size="small" placeholder="请填写详细地址" clearable @change="handleChangeLocalDetails"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    props: ['type', 'povinceData', 'isVirtual'],
    data() {
        return {
            provinceList: [],
            cityList: [],
            areaList: [],
            formData: {
                province: '',
                city: '',
                area: '',
                localDetails: ''
            }
        }
    },
    computed: {
        // formData1: {

        //     // get() {
        //     //     if(this.type =='edit') {
        //     //         return this.$store.state.provinceAndCity
        //     //     }else{
        //     //         return {
        //     //             province: '',
        //     //             city: '',
        //     //             area: '',
        //     //             localDetails: ''
        //     //         }
        //     //     }
        //     // },
        //     // set() {}
        // }
    },
    created() {

        if(this.type == 'edit') {
            this.formData.province= this.$store.state.provinceAndCity.province
            this.formData.city= this.$store.state.provinceAndCity.city
            this.formData.area= this.$store.state.provinceAndCity.area
            this.formData.localDetails= this.$store.state.provinceAndCity.localDetails   
        }else{

        }
        
    },
    mounted() {
        this.getProviceByPid()
    },
    methods: {
        /**获取省 */
        getProviceByPid() {
            this.$server.storeWarehouseController.getProvinceCity(0).then(res => {
                this.provinceList= res.data
                if(this.formData.province == 'null,null') {
                    this.formData.province= ''
                }
                if(this.formData.city =='null,null') {
                    this.formData.city= ''
                } 
                if(this.formData.area== 'null,null') {
                    this.formData.area= ''
                }
                if(this.formData.localDetails == 'null, null') {
                    this.formData.localDetails= ''
                }
                if(this.formData.province != '') {
                    this.$server.storeWarehouseController.getProvinceCity(this.formData.province.split(',')[0]).then(res => {
                        this.cityList= res.data
                        if(this.formData.city != '') {
                            this.$server.storeWarehouseController.getProvinceCity(this.formData.city.split(',')[0]).then(res => {
                                this.areaList= res.data
                            })
                        }
                    })
                }
            })  
        },
        /**获取市 */
        getCityByProviceId() {
            if(this.formData.province != '') {
                this.$server.storeWarehouseController.getProvinceCity(this.formData.province.split(',')[0]).then(res => {
                    this.cityList= res.data
                })
            }
        },
        /**获取区/县 */
        getAreaByProviceId() {
            if(this.formData.city != '') {
                this.$server.storeWarehouseController.getProvinceCity(this.formData.city.split(',')[0]).then(res => {
                    this.areaList= res.data
                })
            }
        },
        handleChangeProvince(val) {
            this.$store.dispatch('changeProvince', val)
            if(val) {
                this.getCityByProviceId()
                this.formData.city= ''
                this.formData.area= ''
            }
        },
        handleChangeCity(val) {
            this.$store.dispatch('changeCity', val)
            if(val) {
                this.getAreaByProviceId()
                this.formData.area= ''
            }  
        },
        handleChangeArea(val) {
            this.$store.dispatch('changeArea', val)
        },
        handleChangeLocalDetails(val) {
            this.$store.dispatch('changeLocalDetails', val)
        }
    }
}
</script>